import { defineComponent, toRefs, ref, computed, PropType, watch, onMounted } from "vue";
import '@src/modules/trigger/components/ProcessNodeChart/style/BaseNodeSelect.scss'

/* type */
import { NodeTypeEnum } from '@src/modules/trigger/model/enum/index.ts'
/* state */
import state from '@src/modules/trigger/view/setting/util/state.js'


export default defineComponent({
    name: 'nodeSelect',
    props: {
        options: {
            type: Object as PropType<any>,
            default: () => {}
        },
        nodeType: {
            type: String as PropType<string>,
            default: NodeTypeEnum.START_NODE
        }
    },
    setup(props) {
        const { options, nodeType } = toRefs(props)
        const triggerWayList = ref('')

        // 显示节点顶部文案
        const showTopContent = computed(() => {
            return options.value.appName + (options.value.selectObjName ?  `/${options.value.selectObjName}` : '')
        })
        const nodeSelectHandler = () => {
            console.log('nodeSelectHandler')
        }

        const updateTriggerWayList = () => {
            // 初始化执行方式
            if (nodeType.value === NodeTypeEnum.START_NODE) {
                if (state.editStatus) {
                    if (!state.currentTriggerInfo?.eventWayInfo || !state.currentTriggerInfo.triggerWayName) {
                        triggerWayList.value = '请选择'
                        return
                    }
                    // 如果当前为事件触发，凭借eventWayInfo里面的信息
                    if (state.executeWay.way && state.executeWay.way === 'event') {
                        triggerWayList.value = state.currentTriggerInfo?.eventWayInfo.map(item => item).filter(item => item).join('/') || '请选择'
                        return
                    }
                    // 否则直接使用当前触发事件名称就可以了
                    if (state.currentTriggerInfo.triggerWayName) {
                        triggerWayList.value = state.currentTriggerInfo.triggerWayName || ''
                        return
                    }
                } else {
                    if (!state.currentTriggerInfo?.eventWayInfo || !state.currentTriggerInfo.triggerWayName) {
                        triggerWayList.value = '请选择'
                        return
                    }
                    // 如果当前为事件触发，凭借eventWayInfo里面的信息
                    if (state.executeWay.way && state.executeWay.way === 'event') {
                        triggerWayList.value = state.currentTriggerInfo?.eventWayInfo.map(item => item).filter(item => item).join('/') || '请选择'
                        return
                    }
                    // 否则直接使用当前触发事件名称就可以了
                    if (state.currentTriggerInfo.triggerWayName) {
                        triggerWayList.value = state.currentTriggerInfo.triggerWayName || ''
                        return
                    }
                    triggerWayList.value = '请选择'
                }
                
            }
        }

        const showLogoType = () => {
            const appLogo = options.value.appLogo;

            if (!appLogo) {
                return ''
            }

            if (appLogo.startsWith('icon-')) {
                return 'icon';
            } else if (appLogo.startsWith('http') || appLogo.startsWith('https')) {
                return 'http';
            } else if (appLogo === '') {
                return ''
            }
        }
        const renderProcessLogo = () => {
            if (showLogoType() === 'icon') {
                return (
                    <div class={`process-select-icon iconfont ${options.value.appLogo ? options.value.appLogo : ''}`}></div>
                )
            }
            if (showLogoType() === 'http') {
                return (
                        <img src={options.value.appLogo} alt="" class="process-select-http"/>
                )
            }
            if (showLogoType() === '') {
                return (
                    <div class={'process-select-default'}>
                        { options.value.appName ? options.value.appName.slice(0, 2) : ''}
                    </div>
                )
            }
        }
        
        /**
         * @description 编辑状态初始化函数
         */
        function editInit() {
            if (options.value?.apiName) {
                state.currentTriggerInfo.triggerWayName = state.executeWay.way
                state.currentTriggerInfo.eventWayInfo = options.value?.apiName.split('/')
            }
        }
        // 编辑状态下将获取数据赋值
        if (state.editStatus) {
            editInit()
        }

        
        watch(
            [
                () => state.currentTriggerInfo.eventWayInfo,
                () => state.currentTriggerInfo.triggerWayName
            ],
            ([newEventWayInfo, newTriggerWayName]) => {
                if (newEventWayInfo || newTriggerWayName) {
                    updateTriggerWayList()
                }
            },
            {  immediate: true,deep: true }
        );

        return () => (
            <div class="process-select">
                <div class={`process-select-base`}>
                    {renderProcessLogo()}
                </div>
                <div class="process-select-content">
                    <div class="process-select-content__top">{showTopContent.value}</div>
                        <div class="process-select-content_bottom" >
                            <span class="process-select-content_bottom__text">触发动作：</span>
                            <div class="process-select-content_bottom__select" onClick={() => nodeSelectHandler()}>
                                {triggerWayList.value}
                            </div>
                        </div>
                </div>
            </div>
        )
    }
})